<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../rs/plugins/easyui/themes/metro/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../rs/plugins/easyui/themes/icon.css">
	<link href="../../rs/css/bootstrap.min14ed.css" rel="stylesheet">
	<link href="../../rs/css/style.min862f.css" rel="stylesheet">
	<script type="text/javascript" src="../../rs/plugins/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="../../rs/plugins/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../rs/plugins/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script src="../../rs/js/jquery.cookie.js"></script>
	<script src="../../rs/js/common_qj.js"></script>
	<style>
		html,body{ margin:0px; height:100%;}
	</style>
</head>
<body >
<table id="table" class="easyui-datagrid"  style="width:100%;height:100%;padding: 10px;"
			data-options="
			rownumbers:true,
			singleSelect:'false',
			method:'get' ,
			toolbar:'#easyui_toolbar',
			fit:true,
			fitColumns:true,
	         ">
		<thead>
			<tr>
				<th data-options="field:'ck',checkbox:true"></th>
				<th data-options="field:'yhbh',align:'center',formatter:formatId" style="width:30%;">用户编号</th>
				<th data-options="field:'user_name',align:'center'" style="width:30%;">用户名称</th>
				<th data-options="field:'email',align:'center'" style="width:38%;">邮  箱</th>
			</tr>
		</thead>
	</table>

	<div id="easyui_toolbar" region="north" border="false"
	  style="height: 45px;padding: 2px 5px; ">
		<div style="float: left;">
			<button style="float:left; margin-right:5px; border-radius: 0px; "  class="btn btn-danger" onclick="data_remove()" >
				<i class="glyphicon glyphicon-trash"></i>
			</button>
		</div>
		<div style="float: left;">
			<button style="float:left;margin-left:5px;  border-radius: 0px;" class="btn btn-success" onclick="open_modal()"  >
				<i class="glyphicon glyphicon-plus"></i> 新增
			</button>
		</div>
		<div id="tb" class="input-group" style="float: right; margin-right: 10px;width:350px">
			<input type="text" class="form-control" id="searchtext" placeholder="输入搜索关键字" value="">
			<div class="input-group-btn">
				<button type="button" class="btn btn-white dropdown-toggle" onclick="do_search()" style="border-radius: 0px;">
					搜索
				</button>
				<button type="button" class="btn btn-default"  onclick="test()"   style="margin-left: 8px;
		border-radius:0px;">
					刷新
				</button>
			</div>


			<div  class="input-group-btn" >
				<button class="btn dropdown-toggle" style="margin-left: 6px; border-radius: 0px;"   data-toggle="dropdown" type="button"  >
					<i class="glyphicon glyphicon-export icon-share"></i>
					<span class="caret"></span>
				</button>
				<ul class="dropdown-menu pull-right" role="menu">
					<li data-type="json"><a href="javascript:void(0)" onClick="expert_json()">JSON</a></li>
					<li data-type="xml"><a href="javascript:void(0)" onClick="expert_xml()">XML</a></li>
					<li data-type="csv"><a href="javascript:void(0)" onClick="expert_csv()">CSV</a></li>
					<li data-type="txt"><a href="javascript:void(0)" onClick="expert_txt()">TXT</a></li>
					<li data-type="sql"><a href="javascript:void(0)" onClick="expert_sql()">SQL</a></li>
					<li data-type="excel"><a href="javascript:void(0)" onClick="expert_excel()">MS-Excel</a></li>
				</ul>
			</div>
		</div>
	</div>


<div style="display: none" id="open_edit">
	<form id="edit_from">
		<div class="input-group" style="padding: 20px 20px 10px 20px;">
			<div class="input-group-btn">
				<button type="button" class="btn btn-white dropdown-toggle " data-toggle="dropdown">用户编号</button>
			</div>
			<input type="text" class="form-control "   name="yhbh"    required="true"  >
		</div>
		<div class="input-group" style="padding: 0px 20px 10px 20px;">
			<div class="input-group-btn">
				<button type="button" class="btn btn-white dropdown-toggle " data-toggle="dropdown">用户名称</button>
			</div>
			<input type="text" class="form-control "   name="user_name">
		</div>
		<div class="input-group" style="padding: 0px 20px 10px 20px;">
			<div class="input-group-btn">
				<button type="button" class="btn btn-white dropdown-toggle " data-toggle="dropdown">邮&nbsp;&nbsp;&nbsp;&nbsp;箱</button>
			</div>
			<input type="text" class="form-control "   name="email">
		</div>
		<div class="input-group" style="padding: 0px 20px 10px 20px;">
			<div class="input-group-btn">
				<button type="button" class="btn btn-white dropdown-toggle " data-toggle="dropdown">密&nbsp;&nbsp;&nbsp;&nbsp;码</button>
			</div>
			<input type="password" class="form-control " id="password"  name="password">
		</div>
		<div style="position: absolute;width:100%;bottom:0px;padding: 0px 20px 10px 20px;">
			<button type="button" class="btn btn-white dropdown-toggle " data-toggle="dropdown"
					style="background-color: #e2e2e2;" onclick="layer.closeAll()">返回
			</button>
			<button type="button" class="btn btn-white dropdown-toggle " data-toggle="dropdown"
					style="background-color: #f54141;color: white;float: right" id="save_do">保存
			</button>
		</div>
	</form>
</div>

<!--页面加载缓冲图标-->
<div id='loadingDiv' style="position:absolute;z-index:1000;top:0px; left:0px;
	width:100%;height:100%;background:white;text-align: center;">
	<h1 style="top: 30%; position: relative;">
		<img src="../../rs/img/loading-2.gif" /><br>
	</h1>
</div>
<script>

	/*页面加载缓冲*/
	function closeLoading() {
		$("#loadingDiv").fadeOut("normal", function () {
			$(this).remove();
		});
	}
	var no;
	$.parser.onComplete = function () {
		if (no) clearTimeout(no);
		no = setTimeout(closeLoading, 1000);
	}
	var yhbh = $.cookie('yhbh');
	var sign = URLencode($.cookie('sign'));
	var yhbh = $.cookie('yhbh');
	$(function(){
		/*if(sign==="undefined"){
			window.location.href = "login.html";
		}*/
		/*f_sheard();*/
	});
	//判断用户权限&加载数据
	function f_sheard(){
		$.ajax({
			type: "post",
			url:G_url+'admin_user/see',
			data: 'sign=' + sign,
			dataType: "json",
			success: function (usedata){
				if (usedata.ok) {
					$('#table').datagrid({
						data: usedata.data
					});
				}else{
					window.location.href = 'login.html';
				}
			},
			error: function (XMLHttpRequest, textStatus, errorThrown) {
			}
		});
	}
	$("#save_do").on("click",function(){
		var layer_title=$('.layui-layer-title').text();
		var yhbh=$("input[name='yhbh']").val();
		var user_name=$("input[name='user_name']").val();
		var email=$("input[name='email']").val();
		var password=$("input[name='password']").val();
		if(password.length!==32){
			password=$.md5(password);
		};
		if(layer_title=="新增"){
			$.ajax({
				type: "post",
				url:G_url+'admin_user/add'+'?'+'sign='+sign,
				data:"yhbh="+yhbh+"&user_name="+user_name+"&email="+email+"&password="+password,
				dataType: "json",
				success: function (result){
					if (result.ok){
						var dd=result.user;
						$('#table').datagrid('appendRow',dd);
					} else {
						layer.msg(result.msg);
					}
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
				}
			});
			layer.closeAll();

		}else if(layer_title=="修改"){
			$.ajax({
				type: "post",
				url:G_url+'admin_user/edit'+'?'+'sign='+sign,
				data:"yhbh="+yhbh+"&user_name="+user_name+"&email="+email+"&password="+password,
				dataType: "json",
				success: function (result){
					if (result.ok){
						layer.msg(result.msg);
					} else {
						layer.msg(result.msg);
					}
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
				}
			});
			f_sheard();
			layer.closeAll();
		}
	});
		/*删除操作*/
	function data_remove(){
		var rows = $('#table').datagrid('getSelections');
		if(rows.length!=0){
			layer.confirm('确定删除吗？', {
				title: [''],
				btn: ['确定', '取消'] //按钮
			}, function do_remove() {
				var yhbhs = $.map(rows, function (row) {
					return row.yhbh
				});
				$.ajax({
					type: "post",
					url: G_url+'admin_user/del'+'?'+'sign='+sign,
					data:"&yhbh=" + yhbhs,
					dataType: "json",
					success: function (result) {
						if (result.ok) {
							layer.closeAll();
							f_sheard();
							layer.msg(result.msg);

						} else {
							layer.msg(result.msg);
						}
					},
					error: function (XMLHttpRequest, textStatus, errorThrown) {
						//alert(errorThrown);
					}
				});
			});
		}else{
			layer.msg("请先选择！");
		}
	}
	//删除操作

	$('#searchtext').bind('keypress',function(event){
		if(event.keyCode == "13") {
			do_search();
		}
	});

		function do_search(){
			var s=$("#searchtext").val();
			$.ajax({
				type: "post",
				url:G_url+ 'admin_user/see',
				data:"s="+s,
				dataType: "json",
				success: function (result){
					if (result.ok){
					} else {
					}
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					//alert(errorThrown);
				}
			});

		}

		function open_modal(){
			$("#open_edit").show();
			layer.open({
				title: "新增",
				type: 1,
				skin: 'layui-layer-rim',//加上边框
				offset: '100px',//top顶部偏移
				area: ['400px', '350px'], //宽高
				shadeClose: true,
				content: $('#edit_from')
			});
		}

		function open_edit(r){
			var rowdata=$('#table').datagrid('getData');
			var row=rowdata.rows[r];
			if (row){
				$("#open_edit").show();
				$('#edit_from').form('load',row);
				layer.open({
					title: "修改",
					type: 1,
					offset: '100px',//top顶部偏移
					skin: 'layui-layer-rim', //加上边框
					area: ['400px', '400px'], //宽高
					shadeClose: true,
					content: $('#edit_from')
				});
			}
		}
		//
		function formatId(value,rowData,rowIndex){
			return "<a href='javascript:void(0)' onclick='open_edit("+rowIndex+");'>"+value+"</a>";
		}



	 function expert_json(){
		 var newtable=$(".datagrid-view2").find(".datagrid-btable").append('<table id="newtable">' +$("#table").html()+ '</table>');
		 newtable.tableExport({
		 type:'json',
		 separator:';',
		 escape:'false'
		 });
		$("#newtable").remove();
	}
	function expert_txt(){
		var newtable=$(".datagrid-view2").find(".datagrid-btable").append('<table id="newtable">' +$("#table").html()+ '</table>');
		newtable.tableExport({
			type:'txt',
			separator:';',
			escape:'false'
		});
		$("#newtable").remove();
	}
	function expert_excel(){
		var newtable=$(".datagrid-view2").find(".datagrid-btable").append('<table id="newtable">' +$("#table").html()+ '</table>');
		newtable.tableExport({
			type:'excel',
			separator:';',
			escape:'false'
		});
		$("#newtable").remove();
	}

</script>
<script src="../../rs/plugins/layer/layer.min.js"></script>
<script src="../../rs/js/bootstrap.js"></script>
<script src="../../rs/plugins/md5.js"></script>
<script src="../../rs/plugins/tableExport.js"></script>
</body>
</html>